import type { ActionType } from '@ant-design/pro-components';
import { ProForm, ProFormSelect, ProFormText, ProTable } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import type { Meeting, MeetingParams } from '@fill/client';
import { rspc } from '@fill/client';
import { Form, Space } from 'antd';
import { Export } from '../record/Export';
import { approvalTypes, meetingTypes, useMeetingDetail } from './Detail';
import { CreateMeeting } from './Create';

export default () => {
  const actionRef = useRef<ActionType>();
  const { columns } = useMeetingDetail();
  const [params, setParams] = useState<{ arg: MeetingParams }>({
    arg: {
      slug: '',
      types: null,
      state: null,
    },
  });
  const { data, isLoading } = rspc.useQuery(['meetings.get', params]);
  const [form] = Form.useForm<any>();
  return (
    <>
      <ProTable<Meeting>
        columns={columns}
        actionRef={actionRef}
        // columnsState={{
        //   persistenceKey: 'pro-table-singe-demos',
        //   persistenceType: 'localStorage',
        //   onChange(value) {
        //     console.log('value: ', value);
        //   },
        // }}

        dataSource={data}
        loading={isLoading}
        // request={async (params) => {
        //   setParams({
        //     arg: {
        //       slug: params.slug || '',
        //       type: params.type || null,
        //     },
        //   });
        //   return {
        //     data: [],
        //     success: true,
        //   };
        // }}
        headerTitle={
          <>
            <Space >
              <CreateMeeting />
              <Export module="meeting" text="导出提报" />
            </Space>
          </>
        }
        rowKey="uuid"
        search={false}
        options={false}
        // form={{
        //   // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
        //   syncToUrl: (values, type) => {
        //     if (type === 'get') {
        //       return {
        //         ...values,
        //         created_at: [values.startTime, values.endTime],
        //       };
        //     }
        //     return values;
        //   },
        // }}
        pagination={{
          pageSize: 20,
          onChange: page => console.log(page),
        }}
        dateFormatter="string"
        toolBarRender={() => [
          // eslint-disable-next-line react/jsx-key
          <ProForm<{
            slug: string
            types: string
            state: string
          }>
            form={form}
            layout="inline"
            submitter={{
              searchConfig: {
                submitText: '查询',
              },
              render(props, dom) {
                return dom.reverse();
              },
              onSubmit() {
                form.submit();
              },
              onReset() {
                form.resetFields();
                form.submit();
              },
            }}
            onFinish={async (params) => {
              console.log(params);
              setParams({
                arg: {
                  slug: params.slug || '',
                  types: params?.types || null,
                  state: params.state || null,
                },
              });
            }}
          >
            <ProFormText name="slug" placeholder="会议主题" width="sm" />
            <ProFormSelect name="types" placeholder="会议类型" width="sm" valueEnum={meetingTypes} />
            <ProFormSelect name="state" placeholder="审批状态" width="sm" valueEnum={approvalTypes}/>
          </ProForm>,
        ]}
      />

    </>
  );
};
